<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加健康记录 - 宠物医院管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 p-0">
                <%@ include file="../common/admin-sidebar.jsp" %>
            </div>

            <!-- 主内容区域 -->
            <div class="col-md-10">
                <div class="main-content p-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">添加健康记录</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <a href="${pageContext.request.contextPath}/health/list" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-arrow-left"></i> 返回列表
                        </a>
                    </div>
                </div>

                <!-- 错误消息 -->
                <c:if test="${not empty error}">
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        ${error}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                </c:if>

                <!-- 添加表单 -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">健康记录信息</h5>
                    </div>
                    <div class="card-body">
                        <form method="post" action="${pageContext.request.contextPath}/health/add" id="addForm">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="petId" class="form-label">选择宠物 <span class="text-danger">*</span></label>
                                        <select class="form-select" id="petId" name="petId" required>
                                            <option value="">请选择宠物</option>
                                            <c:forEach var="pet" items="${pets}">
                                                <option value="${pet.petId}" ${healthRecord.petId == pet.petId ? 'selected' : ''}>
                                                    ${pet.petName} - ${pet.petType} (主人: ${pet.owner.realName})
                                                </option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="visitDate" class="form-label">就诊日期 <span class="text-danger">*</span></label>
                                        <input type="date" class="form-control" id="visitDate" name="visitDate" 
                                               value="${healthRecord.visitDate}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="doctorName" class="form-label">医生姓名</label>
                                        <input type="text" class="form-control" id="doctorName" name="doctorName" 
                                               value="${healthRecord.doctorName}" placeholder="输入医生姓名">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="cost" class="form-label">费用</label>
                                        <div class="input-group">
                                            <span class="input-group-text">¥</span>
                                            <input type="number" class="form-control" id="cost" name="cost" 
                                                   value="${healthRecord.cost}" step="0.01" min="0" placeholder="0.00">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="symptoms" class="form-label">症状描述 <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="symptoms" name="symptoms" rows="4" 
                                          placeholder="请详细描述宠物的症状..." required>${healthRecord.symptoms}</textarea>
                                <div class="form-text">最多1000个字符</div>
                            </div>

                            <div class="mb-3">
                                <label for="diagnosis" class="form-label">诊断结果 <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="diagnosis" name="diagnosis" rows="4" 
                                          placeholder="请输入诊断结果..." required>${healthRecord.diagnosis}</textarea>
                                <div class="form-text">最多1000个字符</div>
                            </div>

                            <div class="mb-3">
                                <label for="treatment" class="form-label">治疗方案</label>
                                <textarea class="form-control" id="treatment" name="treatment" rows="4" 
                                          placeholder="请输入治疗方案...">${healthRecord.treatment}</textarea>
                                <div class="form-text">最多1000个字符</div>
                            </div>

                            <div class="mb-3">
                                <label for="medication" class="form-label">用药记录</label>
                                <textarea class="form-control" id="medication" name="medication" rows="3" 
                                          placeholder="请输入用药记录...">${healthRecord.medication}</textarea>
                                <div class="form-text">最多1000个字符</div>
                            </div>

                            <div class="mb-3">
                                <label for="nextVisitDate" class="form-label">下次复诊日期</label>
                                <input type="date" class="form-control" id="nextVisitDate" name="nextVisitDate" 
                                       value="${healthRecord.nextVisitDate}">
                                <div class="form-text">如需复诊，请选择复诊日期</div>
                            </div>

                            <div class="mb-3">
                                <label for="notes" class="form-label">备注</label>
                                <textarea class="form-control" id="notes" name="notes" rows="3" 
                                          placeholder="其他备注信息...">${healthRecord.notes}</textarea>
                                <div class="form-text">最多2000个字符</div>
                            </div>

                            <div class="d-flex justify-content-end">
                                <a href="${pageContext.request.contextPath}/health/list" class="btn btn-secondary me-2">
                                    <i class="fas fa-times"></i> 取消
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> 保存记录
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 表单验证
        document.getElementById('addForm').addEventListener('submit', function(e) {
            const petId = document.getElementById('petId').value;
            const visitDate = document.getElementById('visitDate').value;
            const symptoms = document.getElementById('symptoms').value.trim();
            const diagnosis = document.getElementById('diagnosis').value.trim();

            if (!petId) {
                alert('请选择宠物');
                e.preventDefault();
                return;
            }

            if (!visitDate) {
                alert('请选择就诊日期');
                e.preventDefault();
                return;
            }

            if (!symptoms) {
                alert('请输入症状描述');
                e.preventDefault();
                return;
            }

            if (!diagnosis) {
                alert('请输入诊断结果');
                e.preventDefault();
                return;
            }

            // 验证字符长度
            if (symptoms.length > 1000) {
                alert('症状描述不能超过1000个字符');
                e.preventDefault();
                return;
            }

            if (diagnosis.length > 1000) {
                alert('诊断结果不能超过1000个字符');
                e.preventDefault();
                return;
            }

            const treatment = document.getElementById('treatment').value.trim();
            if (treatment.length > 1000) {
                alert('治疗方案不能超过1000个字符');
                e.preventDefault();
                return;
            }

            const medication = document.getElementById('medication').value.trim();
            if (medication.length > 1000) {
                alert('用药记录不能超过1000个字符');
                e.preventDefault();
                return;
            }

            const notes = document.getElementById('notes').value.trim();
            if (notes.length > 2000) {
                alert('备注不能超过2000个字符');
                e.preventDefault();
                return;
            }

            // 验证复诊日期
            const nextVisitDate = document.getElementById('nextVisitDate').value;
            if (nextVisitDate && nextVisitDate <= visitDate) {
                alert('复诊日期不能早于或等于就诊日期');
                e.preventDefault();
                return;
            }

            // 验证费用
            const cost = document.getElementById('cost').value;
            if (cost && (parseFloat(cost) < 0 || parseFloat(cost) > 999999.99)) {
                alert('费用必须在0到999999.99之间');
                e.preventDefault();
                return;
            }
        });

        // 设置默认就诊日期为今天
        document.addEventListener('DOMContentLoaded', function() {
            const visitDateInput = document.getElementById('visitDate');
            if (!visitDateInput.value) {
                const today = new Date().toISOString().split('T')[0];
                visitDateInput.value = today;
            }
        });

        // 字符计数
        function setupCharacterCount(textareaId, maxLength) {
            const textarea = document.getElementById(textareaId);
            const helpText = textarea.nextElementSibling;
            
            textarea.addEventListener('input', function() {
                const currentLength = this.value.length;
                helpText.textContent = `${currentLength}/${maxLength} 个字符`;
                
                if (currentLength > maxLength) {
                    helpText.classList.add('text-danger');
                } else {
                    helpText.classList.remove('text-danger');
                }
            });
        }

        // 设置字符计数
        setupCharacterCount('symptoms', 1000);
        setupCharacterCount('diagnosis', 1000);
        setupCharacterCount('treatment', 1000);
        setupCharacterCount('medication', 1000);
        setupCharacterCount('notes', 2000);
    </script>
</body>
</html>
